<script setup lang="ts">
import {reactive, ref, watch} from "vue";

let message = ref<string>('li')
let message2 = ref<string>('liu')
// ref未开deep reactive默认开启deep
let message3 = reactive({
  foo: {
    bar: {
      name: 'yue'
    }
  }
})
// 监听
watch([message, message2], (newVal, oldVal) => {
  console.log(newVal, oldVal)
})
watch(message3, (newVal, oldVal) => {
  console.log(newVal, oldVal)
}, {
  // 深度监听
  deep: true,
  // 监听对象初次加载时也调用一次方法体
  immediate: true,
  // pre组件更新前调用 async同步执行 post组件更新后之后调用
  flush:"pre"
})
// 监听单个属性使用函数
watch(() => message3.foo.bar.name, (newVal, oldVal) => {
  console.log(newVal, oldVal)
}, {
  // 深度监听
  deep: true
})

</script>

<template>
  <div>
    case1:<input v-model="message" type="text">
    <hr>
    case2:<input v-model="message2" type="text">
    <hr>
    case3:<input v-model="message3.foo.bar.name" type="text">
  </div>
</template>

<style scoped>

</style>